import React from 'react'
import { List, Project } from "./list"
import { SearchPanel } from "./search-panel"
import { useEffect, useState } from "react"
import { cleanObject, useMount, useDebounce, useDocumentTitle } from 'utils'
import * as qs from 'qs'
import { useHttp } from 'utils/http'
import styled from '@emotion/styled'
import { Button, Typography } from 'antd'
import { useAsync } from 'utils/use-async'
import { useProjects } from 'utils/project'
import { useUsers } from 'utils/user'
import { Test } from '../../components/test-closure'
import { useUrlQueryParam } from 'utils/url'
import { useProjectModal, useProjectsSearchParams } from './util'
import { ButtonNoPadding, Row } from 'components/lib'

// 基本类型、可以放到依赖里；组件状态，可以放到依赖里；非组件状态的对象，绝不可以放到依赖里

// 使用js的同学，大部分的错误都是在 runtime(运行时) 的时候发现的
// 我们希望，在静态代码中，就能找到其中的一些错误 -> 强类型
const apiUrl = process.env.REACT_APP_API_URL

export function ProjectListScreen() {
  useDocumentTitle('项目列表', false)

  const [param, setParam] = useProjectsSearchParams()
  const {isLoading, error, data: list, retry} = useProjects(useDebounce(param, 200))
  const {data: users} = useUsers()
  const {open} = useProjectModal()

  useUrlQueryParam(['name'])

  return (
    <Container>
      {/* <Test></Test> */}
      <Row between={true}>
        <h1>项目列表</h1>
        <ButtonNoPadding type='link' onClick={open}>创建项目</ButtonNoPadding>
      </Row>
      <SearchPanel users={users || []} param={param} setParam={setParam} />
      {error ? <Typography.Text type="danger">{error.message}</Typography.Text> : null}
      <List refresh={retry} loading={isLoading} users={users || []} dataSource={list || []} />
    </Container>
  )
}

ProjectListScreen.whyDidYouRender = false

const Container = styled.div`
  padding: 3.2rem;
`
